<div class="experiment-info-header">
    <div class="experiment-info-subheader">
        <h1>{{ experiment.name }}</h1>

        <div class="experiment-info-buttons">
            
            <!-- Download -->
            <sly-iw-download-button
                style="padding: 7px 8px;"
                :disabled="false"
                teamFilesPath="{{ experiment.paths.artifacts_dir.path + '/' }}"
                :command="command">
                <img src="" alt="download--v1">
            </sly-iw-download-button>

            <!-- Finetune -->
            <sly-iw-launch-button
                style=""
                :disabled="false"
                :autoRun="false"
                :openInNewWindow="true"
                :selectContext="true"
                :state="{ 'trainTaskId': {{ experiment.task_id }}, 'trainMode': 'continue' }"
                :moduleId="{{ resources.apps.train.module_id }}"
                :command="command">
                <img src="" alt="support">
                <span>Finetune</span>
            </sly-iw-launch-button>

            <!-- Train New -->
            <sly-iw-launch-button
                style=""
                :disabled="false"
                :autoRun="false"
                :openInNewWindow="true"
                :selectContext="true"
                :state="{ 'trainTaskId': {{ experiment.task_id }}, 'trainMode': 'new' }"
                :moduleId="{{ resources.apps.train.module_id }}"
                :command="command">
                <img src="" alt="graduation-cap">
                <span>Train New</span>
            </sly-iw-launch-button>

            <!-- Deploy -->
            <sly-iw-launch-button 
                style=""
                :disabled="false"
                :autoRun="false"
                :state="{ 'trainTaskId': {{ experiment.task_id }}, }"
                :moduleId="{{ resources.apps.serve.module_id }}"
                :openInNewWindow="true"
                :command="command">
                <img src="" alt="rocket" />
                <span>Deploy</span>
            </sly-iw-launch-button>

            <!-- Apply Model -->
            <sly-iw-launch-button class="primary"
                style=""
                :selectContext="true"
                :disabled="false"
                :autoRun="false"
                :state="{ 'trainTaskId': {{ experiment.task_id }}, 'run': false, 'stopAfterRun': false}"
                :moduleId="{{ resources.apps.predict.module_id }}"
                :openInNewWindow="true"
                :command="command"
            >
                <img src="" alt="monitor--v1">
                <span>Apply Model</span>
            </sly-iw-launch-button>

        </div>
    </div>
    <div class="experiment-info-subheader-body">
        <div class="experiment-info-subheader-block">
            <div class="experiment-info-subheader-mini-title">
                <h2>Training Info</h2>
                <a href="{{ experiment.training.session.url }}" target="_blank">Session <i class="zmdi zmdi-arrow-right-top" /></a>
                <!-- Launch Logs Button -->
                {% if experiment.training.logs.path %}
                <sly-iw-launch-button
                    style=""
                    :disabled="false"
                    :autoRun="true"
                    :state="{ 'slyFolder': '{{ experiment.training.logs.path }}' }"
                    :moduleId="{{ resources.apps.log_viewer.module_id }}"
                    :proxyKeepUrl="true"
                    :openInNewWindow="true"
                    :command="command">
                    <span>Logs</span> <i class="zmdi zmdi-arrow-right-top" />
                </sly-iw-launch-button>
                {% endif %}
            </div>
            <ul>
            <li><strong>Date:</strong> {{ experiment.date }}</li>
            <li><strong>Framework:</strong> {{ experiment.model.framework }}</li>
            <li><strong>Model:</strong> {{ experiment.model.name }}</li>
            {% if experiment.model.base_checkpoint.url and not experiment.model.base_checkpoint.path %}
            <!-- Pretrained Checkpoint -> download link-->
            <li><strong>Base checkpoint:</strong> <a href="{{ experiment.model.base_checkpoint.url }}" target="_blank" download="{{ experiment.model.base_checkpoint.name }}">{{ experiment.model.base_checkpoint.name }} <i class="zmdi zmdi-download"></i></a></li>
            {% elif experiment.model.base_checkpoint.path %}
            <!-- Custom Checkpoint -> TeamFiles Link -->
            <li><strong>Base checkpoint:</strong> <a href="{{ experiment.model.base_checkpoint.path }}" target="_blank">{{ experiment.model.base_checkpoint.name }}</a></li>
            {% else %}
            <li><strong>Base checkpoint:</strong> {{ experiment.model.base_checkpoint.name }}</li>
            {% endif %}
            <li><strong>Task:</strong> {{ experiment.model.task_type }}</li>
            <li><strong>Device:</strong> {{ experiment.training.device }}</li>
            <li><strong>Training duration:</strong> {{ experiment.training.duration }}</li>
            </ul>
        </div>
        <div class="experiment-info-subheader-block">
            <div class="experiment-info-subheader-mini-title">
                <h2>Training Data</h2>
                <a href="{{ experiment.project.url }}" target="_blank">Project <i class="zmdi zmdi-arrow-right-top" /></a>
                <a href="{{ experiment.paths.artifacts_dir.url }}" target="_blank">Artifacts <i class="zmdi zmdi-arrow-right-top" /></a>
            </div>
            <ul>
            <li><strong>Project:</strong> {{ experiment.project.name }}</li>
            <li><strong>Classes:</strong> ({{ experiment.project.classes.count }})  {% for class_name in experiment.project.classes.names.short_list %}<span class="class-tag">{{ class_name }}</span>  {% endfor %}</li>
            
            {% if experiment.project.splits.train.url %}
            <li><strong>Training:</strong> <a href='{{ experiment.project.splits.train.url }}' target="_blank">{{ experiment.project.splits.train.size }} {{ experiment.project.type }}</a></li>
            {% else %}
            <li><strong>Training:</strong>{{ experiment.project.splits.train.size }} {{ experiment.project.type }}</li>
            {% endif %}
            
            {% if experiment.project.splits.val.url %}
            <li><strong>Validation:</strong> <a href='{{ experiment.project.splits.val.url }}' target="_blank">{{ experiment.project.splits.val.size }} {{ experiment.project.type }}</a></li>
            {% else %}
            <li><strong>Validation:</strong>{{ experiment.project.splits.val.size }} {{ experiment.project.type }}</li>
            {% endif %}
            
            </ul>
        </div>
        {% if experiment.training.evaluation.id %}
        <div class="experiment-info-subheader-block">
            <div class="experiment-info-subheader-mini-title">
                <h2>Evaluation</h2>
                {% if experiment.training.evaluation.id %}
                <a href="{{ experiment.training.evaluation.url }}" target="_blank">Full Report <i class="zmdi zmdi-arrow-right-top" /></a>
                {% endif %}
            </div>
            {% for metric in experiment.training.evaluation.display_metrics %}
            <div class="experiment-metric">
                <span class="experiment-label">{{ metric.name }}</span>
                <span class="experiment-value">{{ metric.value }}</span>
                <div class="experiment-progress-bar">
                    <div class="experiment-progress" style="width: {{ metric.percent_value }}%"></div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
    <div class="experiment-info-subheader-footer-menu">
        {% if experiment.training.evaluation.id %}
        <a :href="`${location.pathname}#predictions`" class="active">Predictions</a>
        <a :href="`${location.pathname}#evaluation-2`">Evaluation</a>
        {% endif %}
        {% if not experiment.training.evaluation.id %}
        <a :href="`${location.pathname}#evaluation-2`" class="active">Evaluation</a>
        {% endif %}
        {% if widgets.training_plots %}
        <a :href="`${location.pathname}#training-plots`">Training Plots</a>
        {% endif %}
        <a :href="`${location.pathname}#artifacts`">Artifacts</a>
        <a :href="`${location.pathname}#classes`">Classes</a>
        <a :href="`${location.pathname}#hyperparameters`">Hyperparameters</a>
        <a :href="`${location.pathname}#api-integration-amp-deployment`">API Integration & Deployment</a>
    </div>
</div>
